/** @format */

/**
 * @file AdminLayout.jsx
 * @description 后台管理系统的主要布局组件
 */
//
import React, { useState } from 'react';
import { Outlet, Link, useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { adminLogout } from '../store/adminAuthSlice'; // 确保引入了 adminLogout
import { Layout, Menu, Breadcrumb, Avatar, Dropdown, Space, Typography } from 'antd';
import {
  DesktopOutlined,
  PieChartOutlined,
  FileOutlined,
  TeamOutlined,
  UserOutlined,
  SettingOutlined,
  LogoutOutlined,
  AppstoreOutlined, // 示例图标
  ShoppingOutlined, // 示例图标
  SolutionOutlined, // 示例图标
} from '@ant-design/icons';

const { Header, Content, Footer, Sider } = Layout;
const { Text } = Typography;

function getItem(label, key, icon, children) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const mainMenuItems = [ // 修改变量名以避免与 userMenuItems 混淆
  getItem(<Link to="dashboard">仪表盘</Link>, 'dashboard', <PieChartOutlined />),
  getItem(<Link to="orders">订单管理</Link>, 'orders', <ShoppingOutlined />),
  getItem('用户中心', 'user-center', <UserOutlined />, [
    getItem(<Link to="users">用户管理</Link>, 'users', <TeamOutlined />),
    getItem(<Link to="roles">角色管理</Link>, 'roles', <SolutionOutlined />),
  ]),
  // getItem('文件管理', '9', <FileOutlined />), // 示例
];

const AdminLayout = () => {
  const [collapsed, setCollapsed] = useState(false);
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const handleLogout = () => {
    dispatch(adminLogout());
    navigate('login'); // 跳转到登录页，确保路径正确
  };

  // 直接定义 Dropdown 的 menu items 数组
  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: <Link to="#">个人中心</Link>, // 示例，可以链接到实际页面或处理函数
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: <Link to="#">账户设置</Link>, // 示例
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout, // onClick 会在 Menu 的 item 上生效
    },
  ];

  const adminUsername = localStorage.getItem('adminUser')
    ? JSON.parse(localStorage.getItem('adminUser')).username
    : 'Admin';

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
        theme="dark"
        // width={240}
      >
        <div
            style={{
                height: '32px',
                margin: '16px',
                background: 'rgba(255, 255, 255, 0.2)',
                borderRadius: '6px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#fff',
                fontWeight: 'bold'
            }}
        >
          {collapsed ? 'LOGO' : '电商后台管理'}
        </div>
        <Menu
          theme="dark"
          defaultSelectedKeys={['dashboard']}
          mode="inline"
          items={mainMenuItems} // 使用修改后的变量名
        />
      </Sider>
      <Layout className="site-layout">
        <Header
          style={{
            padding: '0 24px',
            background: '#ffffff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            borderBottom: '1px solid #f0f0f0',
          }}
        >
          <div>
            {/* Breadcrumb can be added here if needed */}
          </div>

          <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
            <Space style={{ cursor: 'pointer' }}>
              <Avatar size="small" icon={<UserOutlined />} />
              <Text style={{ color: 'rgba(0,0,0,0.88)' }}>{adminUsername}</Text>
            </Space>
          </Dropdown>
        </Header>
        <Content
          className="admin-content-area"
          style={
            {
              // padding and margin are now handled by .admin-content-area in index.css or by Dashboard's own styling
            }
          }
        >
          <Outlet />
        </Content>
        <Footer style={{ textAlign: 'center', padding: '16px 0' }}>
          电商后台管理系统 ©{new Date().getFullYear()} Created by lyx
        </Footer>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;